<style type="text/css">
    .activity img{
        display: block;
        width: 100%;
    }
    .ac-cen{
        padding: 15px 15px 50px;
    }
    .ac-title{
        text-align: center;
        font-size: 18px;
        line-height: 24px;
        color: #444;
        padding-bottom: 15px;
        border-bottom: 1px solid #d7d7d7;
    }

    .mt-15{
        margin-top:15px;
    }
    .apply-fixed{
        position: absolute;
        bottom: 0px;
    }
    .apply{

        width: 100%;
        height: 49px;
        line-height: 49px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        background-color: #1dbb86;
    }
    .applyInfo{
        width: 80%;        
        background-color:#fff;
        border-radius: 8px;
        position: absolute;
        top: 10%;
        left: 50%;
        margin-left: -40%;
        z-index: 999; 
        
        
    }
    .apply-title{
        height: 40px;
        text-align: center;
        color: #fff;
        background-color: #1dbb86;
        margin-bottom: 20px;
        line-height: 40px;
        font-size: 20px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;        
    }
    .apply-div{
    
        height: 44px;
        background-color: #ececec;
        color: #ccc;
        position: relative;
        margin: 0px 15px 15px 15px;

    }
    .apply-icon{
        position: absolute;
        top: 6px;
        font-size: 30px;
        left: 5px;     
    }
    .apply-icon-person,.apply-icon-phone,.apply-icon-gongsi,.apply-icon-zhiwei{
        position: absolute;
        top: 6px;
        width: 30px;
        height: 30px;
        left: 5px; 
        background-image: url(https://www.superfa.cn/upload/bann/20151104/1446622460230apply-icon.png);
        background-repeat: no-repeat;
        background-size: 100%　100%;

    }
    .apply-icon-person{
        background-position: 0px 4px;
    }
    .apply-icon-phone{
        background-position: 0px -53px;
    }
    .apply-icon-gongsi{
        background-position: 0px -121px;
    }
    .apply-icon-zhiwei{
        background-position: 0px -177px;
    }
    .applyInfo input{
        background-color: #ececec;
        width: 100%;
        height: 44px;
        padding-left: 35px;

    }

    .activated{
        background-color: rgba(29, 187, 134, 0.5);
    }
    .c-style{
        color: #777;
        font-size: 12px;
        line-height: 20px;        
    }

    

</style>
<ion-view view-title="活动详情">
    <ion-nav-buttons side="secondary">
        <button ng-if="platform.IOSAPP" class="button button-clear button-light" ng-click="share()"><i class="icon ion-share"></i></button>
    </ion-nav-buttons>
    <ion-content class="activity has-header has-tabs">
        <img  ng-src="{{dto.activitiesImageUri}}">
        <div class="ac-cen">
            <div class="ac-title">
                <div>{{dto.activitiesTitle}}</div>
                <div>{{dto.activitiesSideTitle}}</div>
            </div>
            <div class="mt-15 c-style" >
                <div>主讲人：{{dto.activitiesHost}}</div>
                <div>时间：<span>{{dto.actStartStr}}</span><span ng-if="dto.activitiesEndTime"> 到 {{dto.actEndStr}}</span></div>
                <div ng-if="dto.activitiesExpenseExplain">活动费用：{{dto.activitiesExpenseExplain}}</div>
                <div ng-if="dto.activitiesTotalPerson">限额人数：{{dto.activitiesTotalPerson}}人</div>
                <div ng-if="dto.activitiesAddre">地点：{{dto.activitiesAddre}}</div>
                <div ng-if="dto.activitiesRecomment" ng-bind-html="dto.activitiesRecomment | to_trusted "></div>
            </div>
        </div>

    </ion-content>
    <div ng-show="activityShow" style="width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);position:absolute;top:0;left:0;z-index:1;"ng-click="activityShow = false">  
    </div>
    <div class="applyInfo ng-hide"  ng-show="activityShow">
        <div class="apply-title">我要去参加活动</div>
        <div class="apply-div">
            <i class="apply-icon-person"></i>
            <input type="text" placeholder="姓名" ng-model="data.personName"/>
        </div>
        <div class="apply-div ">
            <i class="apply-icon-phone" style="padding-left: 5px;"></i>
            <input type="text" maxlength="11" placeholder="手机" ng-model="data.personMobile"/>
        </div>
        <div class="apply-div ">
            <i class="apply-icon-gongsi" style="padding-left: 5px;"></i>
            <input type="text" maxlength="11" placeholder="公司" ng-model="data.personCompany"/>
        </div>
        <div class="apply-div ">
            <i class="apply-icon-zhiwei" style="padding-left: 5px;"></i>
            <input type="text" maxlength="11" placeholder="职位" ng-model="data.personJob"/>
        </div>                
        <div class="apply" ng-click="activityAdd()">确定</div>
    </div>  
    <div class="apply-fixed apply" ng-show="activityIsIng(dto)" ng-click="activityShow =true" style="background-color:#ff5000">立即报名</div>
    <div class="apply-fixed apply" ng-if="activityIsFull(dto)" style="background-color:#c8c8c8;" >名额已满</div>    
    <div class="apply-fixed apply" ng-if="activityIsEnd(dto)" style="background-color:#c8c8c8;" >活动结束</div>

</ion-view>